@import "/web/css/common/main-mobile";

body{background-color: #00040f;}

@font-color : #abcbe4;

.icon-music{position: fixed;width: 36/@rem;height: 36/@rem;top: 26/@rem;right: 26/@rem;background: url("../../img/icon-music.png") center / contain;z-index: 10;}
.icon-music.no{background-image: url("../../img/icon-music-active.png");}

.main-swiper{
    width: 100%;height: 100%;
    .swiper-slide{
        position: relative;font-size: 26/@rem;color: @font-color;
        & > *{position: absolute;}
        .title{width: 500/@rem;top: 190/@rem;left: 125/@rem;font-size: 50/@rem;text-align: center;letter-spacing: 4/@rem;}
        .top-logo{width: 128/@rem;left: 30/@rem;top: 6/@rem;}
        .top-tit{width: 225/@rem;right: 90/@rem;top: 50/@rem;}
        .car-logo{bottom: 0;width: 400/@rem;left: 175/@rem;}
        .arrow-down{width: 40/@rem;left: 50%;margin-left: -20/@rem;bottom: 150/@rem;z-index: 1;opacity: .5;}
    }
    .slide1{
        background: url("img/slide1-bg.jpg") left center / 100% auto no-repeat;
        .bg-img1{width: 100%;left: 0;top: 50%;margin-top: -743/@rem;z-index: 3;}
        .bg-img2{width: 100%;left: 0;top: 50%;margin-top: -760/@rem;z-index: 1;}
        .bg-img3{width: 100%;left: 0;top: 50%;z-index: 2;}
        .main-box{
            top: 50%;left: 50%;margin-top: -191/@rem;margin-left: -183/@rem;width: 366/@rem;z-index: 5;
            & > [class^=ele]{position: absolute;color: #3dfabb;font-size: 36/@rem;letter-spacing: 5/@rem;}
            .ele-print{left: 0;width: 100%;top: 0;}
            .ele-txt1{top: 290/@rem;left: 0;right: 0;text-align: center;}
            .ele-txt2{top: 365/@rem;left: 0;right: 0;text-align: center;}
        }
    }

    .slide2{
        background: url("img/slide2-bg.jpg") left center / 100% auto no-repeat;
        .main-box{
            top: 50%;left: 50%;margin-top: -296/@rem;margin-left: -273/@rem;width: 546/@rem;height: 592/@rem;text-align: center;background: url("img/slide2-box.png") center / contain no-repeat;
            & > *{display: block;margin-left: auto;margin-right: auto;}
            .tit1{width: 320/@rem;margin-top: 94/@rem;}
            .tit2{width: 320/@rem;margin-top: 15/@rem;}
            .date{width: 260/@rem;margin-top: 50/@rem;}
            .cont{width: 260/@rem;margin-top: 60/@rem;}
            .logo{position: absolute;width: 227/@rem;left: 196/@rem;top: -264/@rem;}
        }
    }

    .slide3{
        background: url("img/slide3-bg.jpg") left 0 top -30/@rem no-repeat;background-size: 100% auto;
        .arrow-down{bottom: 30/@rem;}
        .txt{width: 522/@rem;top: 198/@rem;left: 128/@rem;}
        .txt1{width: 300/@rem;top: 420/@rem;left: 225/@rem;}
        .house{width: 480/@rem;top: 480/@rem;left: 110/@rem;}
        .img{width: 600/@rem;top: 850/@rem;left: 70/@rem;}
        .img1{width: 200/@rem;top: 800/@rem;left: 275/@rem;}
    }

    .slide4{
        background: url("img/slide4-bg.jpg") left 0 top -70/@rem no-repeat;background-size: 100% auto;
        .tit{width: 300/@rem;top: 200/@rem;left: 227/@rem;z-index: 1;}
        .box-bg{width: 680/@rem;top: 240/@rem;left: 20/@rem;}
        .txt1{width: 565/@rem;top: 330/@rem;left: 115/@rem;line-height: 36/@rem;}
        .img{width: 560/@rem;top: 630/@rem;left: 95/@rem;}
        .txt2{width: 500/@rem;top: 980/@rem;left: 125/@rem;line-height: 36/@rem;text-align: center;}

    }

    .slide5{
        background: url("img/slide5-bg.jpg") left 0 top -70/@rem no-repeat;background-size: 100% auto;
        .video{width: 586/@rem;height: 336/@rem;top: 310/@rem;left: 85/@rem;
            .video-js{
                width: 100%;height: 100%;
                .vjs-big-play-button{
                    width: 67/@rem;height: 67/@rem;background: url("img/icon-play.png") center / contain no-repeat;border: 0;top: 134/@rem;left: 260/@rem;
                    .vjs-icon-placeholder:before{display: none;}
                }
            }
        }
        .txt-box{
            width: 400/@rem;top: 770/@rem;text-align: center;color: @font-color;left: 175/@rem;
            dt{font-size: 36/@rem;}
            dd{margin-top: 5/@rem;}
        }
    }

    .slide6{
        background: url("img/slide6-bg.jpg") left 0 top -70/@rem no-repeat;background-size: 100% auto;
        .title{top: 140/@rem;}
        .txt-box{
            width: 350/@rem;left: 270/@rem;top: 250/@rem;
            dl{
                margin-bottom: 50/@rem;
                dt{font-size: 30/@rem;font-weight: bold;color: #f48e8e;}
                dd{margin-top: 6/@rem;line-height: 38/@rem;padding-left: 30/@rem;position: relative;
                    &:before{content: '';position: absolute;width: 10/@rem;height: 10/@rem;border-radius: 100%;background-color: @font-color;left: 0;top: 15/@rem;}
                    &.no:before{display: none;}
                }
            }
        }
    }

    .slide7{
        background: url("img/slide7-bg.jpg") left 0 top -70/@rem no-repeat;background-size: 100% auto;
        .title{top: 140/@rem;}
        .cont-box{
            top: 370/@rem;
            .box-bg{display: block;width: 100%;}
            .box-bg1{position: absolute;width: 364/@rem;z-index: 0;left: 196/@rem;top: -60/@rem;}
            [class^=btn] {position: absolute}
            .btn-into{width: 163/@rem;left: 30/@rem;top: 480/@rem;}
            .btn-img1{width: 90/@rem;left: 224/@rem;top: 245/@rem;}
            .btn-img2{width: 86/@rem;left: 364/@rem;top: 245/@rem;}
            .btn-img3{width: 97/@rem;left: 480/@rem;top: 245/@rem;}
            .btn-img4{width: 124/@rem;left: 238/@rem;top: 15/@rem;}
        }
    }

    .slide8{
        background: url("img/slide8-bg.jpg") left 0 top -100/@rem no-repeat;background-size: 100% auto;
        .title{top: 160/@rem;}
        .cont-box{
            top: 262/@rem;width: 556/@rem;height: 688/@rem;left: 100/@rem;background: url("img/slide8-box-bg.png") center / 100% 100% no-repeat;
            table{
                width: 100%;font-size: 22/@rem;
                th{color: #000;}
                td{text-align: left;color: #fff;vertical-align: middle;text-align: center;
                    &:first-child{text-align: left;padding-left: 20/@rem;}
                    &:nth-child(2){text-align: left;padding-left: 10/@rem;}
                }
                .two{height: 82/@rem;}
                .thr{height: 82/@rem;}
                .four{height: 80/@rem;}
                .five{height: 52/@rem;}
                .six{height: 80/@rem;}
                .seven{height: 170/@rem;}
            }
        }
    }

    .slide9{
        background: url("img/slide9-bg.jpg") left 0 top -70/@rem no-repeat;background-size: 100% auto;
        .title{top: 140/@rem;z-index: 1;}
        .map-box{
            width: 640/@rem;top: 240/@rem;left: 0;
            [class^=txt-]{position: absolute;}
            .txt-1{width: 215/@rem;top: 254/@rem;left: 460/@rem;}
            .txt-2{width: 215/@rem;top: 360/@rem;left: 320/@rem;}
            .txt-3{width: 215/@rem;top: 425/@rem;left: 310/@rem;}
            .txt-4{width: 300/@rem;top: 550/@rem;left: 360/@rem;
                .box{
                    position: absolute;top: 0;right: 0;height: 100%;left: 0;
                    span{display: block;height: 25%;}
                }
            }

        }
    }

    .slide10{
        background: url("img/slide10-bg.jpg") center no-repeat;background-size: 100% auto;
        .logo{width: 227/@rem;left: 290/@rem;top: 280/@rem;}
        .title{top: 570/@rem;}
        .time{width: 529/@rem;left: 124/@rem;top: 520/@rem;}
        .date{top: 650/@rem;font-size: 30/@rem;}
    }
}

.alert-box{
    position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.8);z-index: 1;overflow: auto;-webkit-overflow-scrolling: touch;
    .cont-box{
        width: 608/@rem;padding: 50/@rem 0 100/@rem;margin: 0 auto;position: relative;
        .close{position: absolute;width: 50/@rem;height: 50/@rem;left: 50%;bottom: 30/@rem;margin-left: -25/@rem;background: url("img/alert-close.png") center / contain;}
        .list{
            width: 100%;height: 308/@rem;background: url("img/alert-box.png") center / 100% no-repeat;box-sizing: border-box;overflow: hidden;margin-top: 20/@rem;
            [class^=txt]{font-size: 26/@rem;color: @font-color;width: 450/@rem;margin-top: 34/@rem;margin-left: 90/@rem;line-height: 30/@rem;
                s{width: 130/@rem;display: inline-block;}
            }
            .txt-title{margin-top: 60/@rem;}
        }

    }
}

//动画命名
.ani-music{animation: ani-music 2s linear infinite;}
.ani-down{animation: ani-down 1.5s infinite;}
.ani-print{animation: ani-print 2s infinite;}
.ani-into{animation: ani-into 1.5s infinite;}
.ani-pulse{animation: ani-pulse 1.5s infinite;}

//音乐播放转动
@keyframes ani-music {
    100% {
        transform: rotate(360deg);
    }
}

//提示下滑
@keyframes ani-down {
    50%{
        transform : translateY(15px);
    }
}

//指纹动画
@keyframes ani-print {
    100% {
        transform: translateY(280/@rem);
    }
}

//入口处动画
@keyframes ani-into {
    50%{
        transform : translateY(15px);
    }
}

//大小css动画
@keyframes ani-pulse {
    50% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
}